<template>
  <div id="app">

    <el-container>
      <el-aside width="200px">
        <!-- aside -->
          <div class="logo"> 
            <img src="./images/elead-logo.png" alt="">
          </div>

          <div class="aside_i"> 
            <i class="el-icon-date"></i>
          </div>

          <ul class="aside_ul">
            <router-link to="/qa/config" tag="li" active-class="router-link-active">
              <span><i class="el-icon-goods"></i>考核配置</span>
            </router-link>
            <router-link to="/qa/detail" tag="li">
              <span><i class="el-icon-star-on"></i>考核详情</span>
            </router-link>
            <router-link to="/qa/goOnline" tag="li"><span><i class="el-icon-edit"></i>上线配置</span></router-link>
            <router-link to="/qa/onlineDetail" tag="li"><span><i class="el-icon-tickets"></i>上线详情</span></router-link>
          </ul>
        
       
      </el-aside>
      <el-container>
        <el-header>
          <!-- header -->
          <div class="header_div"><span>质量管理系统</span></div>
        </el-header>
        <el-main>
          <router-view/>
        </el-main>
        <el-footer>
          <!-- footer -->
          <div class="footer">
            © 2017 上海易立德企业管理咨询有限公司 . All Rights Reserved. 沪ICP16053493号
          </div>
        </el-footer>
      </el-container>
    </el-container>
    
     <!-- <router-view/> -->
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style lang="scss">
*{
  margin: 0;
  padding: 0;
}
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  background-color: #ECECEC;
}
 .el-header, .el-footer {
    color: #333;
    text-align: center;
    line-height: 60px;
    padding: 0;
  }
  .el-header{
    background: #fff;
  }

  .el-footer{
    padding: 0 7px 0 7px;
    .footer{
      font-size: 12px;
      color:rgba(0, 0, 0, 0.65);
      background: #fff;
    }
  }
  .el-aside {
    color: #333;
    text-align: center;
    line-height: 200px;
    background-color: #fff;
    height:800px;
  }
  
  .el-main {
    background-color: #ECECEC;
    color: #333;
    text-align: center;
    height:600px;
    padding: 7px;
  }
  
  body > .el-container {
    margin-bottom: 40px;
  }
  
  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }
  
  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }
  
  .logo{
    height: 60px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border-bottom: 6px solid #ececec;
    background: #fff;
    width: 100%;

    img{
      margin-left: 43px;
      -webkit-transition: all .2s;
      transition: all .2s;
    }
  }

  .aside_i{
    width: 100%;
    height: 42px;
    background-color: #ECECEC;
    line-height: 42px
  }

  .aside_ul{
    overflow-y: auto;
    background-color: #fff;
    li{
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      outline: 0!important;
      font-size: 15px;
      height: 42px;
      line-height: 42px;
      cursor:pointer;
      position: relative;
      i{
        margin-right: 8px;
      }
      span{
        display: inline-block;
      }
    }
  }

  .header_div{
    height: 60px;
    line-height: 60px;
    text-align: center;
    span{
      margin-top: 17px;
      display: flex;
      height: 40%;
      font-size: 24px;
      border-left: 1px solid #CCC;
      padding-left: 17px;
      align-items: center;
    }
  }
  .router-link-active{
    color: #108EE9;
    transition: transform 1s;
    transform: scaleY(1);
    &:after {
        content:"";
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        border-right: 2px solid #108EE9;
        opacity: 1;
        transform: scaleY(1);
    }
  }

</style>
